<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0" />
    <title>纯css实现的多行文本流式传输效果</title>
    <meta
      name="keywords"
      content="demo,js,css,animate,技术方案" />
    <style>
      body {
        margin: 0;
        padding: 8px;
        background: #eee;
      }

      .container {
        position: relative;
        margin: 0 auto;
        max-width: 90vw;
        border-radius: 0.25rem;
        background: #000;
        color: #fff;
        line-height: 1.5;
      }

      .text-linear-bg {
        position: absolute;
        inset: 0;
      }

      @property --bgp {
        syntax: '<percentage>';
        initial-value: 0%;
        inherits: false;
      }

      .text {
        background-image: linear-gradient(to right, transparent var(--bgp), #000 var(--bgp));
        color: transparent;
        animation: text-linear 10s linear forwards;
        --bgp: 0%;
      }

      @keyframes text-linear {
        to {
          --bgp: 100%;
        }
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div>
        这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
      </div>
      <div class="text-linear-bg">
        <span class="text">
          这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
          这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
          这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
          这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
          这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
          这是一段文本 这是一段文本 这是一段文本这是一段文本 这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本
        </span>
      </div>
    </div>
  </body>
</html>
